<div
  class="setup-container gradient d-flex align-items-start justify-content-center"
  [ngStyle]="{ 'background': backgroundStyle }"
  [ngClass]="{ 'anim': !backgroundStyle }"
>
  <div class="w-100 setup-card d-flex py-4 flex-column">
    <img
      class="homebridge-logo mx-auto my-3"
      ngSrc="assets/homebridge-color-round.svg"
      alt="Homebridge Logo"
      height="100"
      width="100"
      priority="true"
    />
    <div class="progress w-100 my-4">
      <div
        class="progress-bar progress-bar-striped bg-success"
        role="progressbar"
        [style.width]="progress + '%'"
        [attr.aria-valuenow]="progress"
        aria-valuemin="0"
        aria-valuemax="100"
        [ngClass]="{ 'progress-bar-animated': loading || restoreUploading }"
      ></div>
    </div>
    @if (step === 'welcome') {
    <div class="w-100 d-flex flex-column align-items-center mb-2">
      <h4 class="mb-3 text-center">{{ 'setup.welcome_to_homebridge' | translate }}</h4>
      <div class="mb-4 small grey-text text-center" [innerHTML]="'setup.intro' | translate"></div>
      <button type="button" class="btn btn-lg btn-primary mb-4" (click)="onClickGettingStarted()">
        {{ 'setup.button_get_started' | translate }}
      </button>
      <a href="javascript:void(0)" class="grey-text" (click)="onClickRestoreBackup()"
        >{{ 'setup_wizard_restore' | translate }}</a
      >
    </div>
    } @else if (step === 'create-account') {
    <div class="w-100 d-flex flex-column align-items-center mb-2">
      <h4 class="mb-3 text-center">{{ 'setup.create_account' | translate }}</h4>
      <div class="mb-4 small grey-text text-center">{{ 'setup_wizard_create_info' | translate }}</div>
      <div class="w-100">
        <form novalidate (ngSubmit)="createFirstUser()" [formGroup]="createUserForm">
          <div class="input-group mb-4">
            <span class="input-group-text custom-input"><i class="fas fa-user primary-text fa-lg"></i></span>
            <input
              formControlName="username"
              type="text"
              id="form-username"
              autocomplete="username"
              autocapitalize="none"
              tabindex="1"
              class="form-control custom-input"
              [readonly]="loading"
              [ngClass]="{
                'is-valid': (createUserForm.controls.username.dirty) && createUserForm.controls.username.valid,
                'is-invalid': (createUserForm.controls.username.dirty) && createUserForm.controls.username.invalid
              }"
              [placeholder]="'users.label_username' | translate"
              required
            />
          </div>
          <div class="input-group mb-4">
            <span class="input-group-text custom-input"><i class="fas fa-lock primary-text fa-lg"></i></span>
            <input
              formControlName="password"
              type="password"
              id="form-pass"
              autocomplete="new-password"
              tabindex="2"
              class="form-control custom-input"
              [readonly]="loading"
              [ngClass]="{
                'is-valid': (createUserForm.controls.password.dirty) && createUserForm.controls.password.valid,
                'is-invalid': (createUserForm.controls.password.dirty) && createUserForm.controls.password.errors
              }"
              [placeholder]="'users.label_password' | translate"
              required
            />
          </div>
          <div class="input-group mb-4">
            <span class="input-group-text custom-input"><i class="fas fa-lock primary-text fa-lg"></i></span>
            <input
              formControlName="passwordConfirm"
              type="password"
              id="form-pass-confirm"
              autocomplete="new-password"
              tabindex="2"
              class="form-control custom-input"
              [readonly]="loading"
              [ngClass]="{
                'is-valid': (createUserForm.controls.passwordConfirm.dirty) && createUserForm.controls.passwordConfirm.valid,
                'is-invalid': (createUserForm.controls.passwordConfirm.dirty) && createUserForm.controls.passwordConfirm.errors
              }"
              [placeholder]="'users.label_confirm_password' | translate"
              required
            />
          </div>
          <div class="mt-3 w-100 d-flex justify-content-between">
            <button
              type="button"
              class="btn btn-elegant ms-0"
              [disabled]="restoreUploading"
              (click)="onClickCancelRestore()"
            >
              {{ 'form.button_back' | translate }}
            </button>
            <button type="submit" class="btn btn-primary" [disabled]="createUserForm.invalid || loading">
              {{ 'form.button_continue' | translate }}
            </button>
          </div>
        </form>
      </div>
    </div>
    } @else if (step === 'restore-backup') {
    <div class="w-100 d-flex flex-column align-items-center mb-2">
      <h4 class="mb-3 text-center">{{ 'setup_wizard_restore' | translate }}</h4>
      <div class="mb-4 small grey-text text-center">{{ 'backup.restore_help_one' | translate }}</div>
      <input
        type="file"
        class="form-control custom-input mb-3"
        id="restoreFileUpload"
        accept="application/gzip, .gz"
        (change)="handleRestoreFileInput($event.target.files)"
      />
      <div class="mt-3 w-100 d-flex justify-content-between">
        <button
          type="button"
          class="btn btn-elegant ms-0"
          [disabled]="restoreUploading"
          (click)="onClickCancelRestore()"
        >
          {{ 'form.button_back' | translate }}
        </button>
        <button
          type="button"
          class="btn btn-primary me-0"
          (click)="onRestoreBackupClick()"
          [disabled]="restoreUploading || !selectedFile"
        >
          @if (restoreUploading) {
          <i class="fas fa-spinner fa-pulse"></i>
          {{ 'backup.label_uploading' | translate }} } @else { {{ 'form.button_continue' | translate }} }
        </button>
      </div>
    </div>
    } @else if (['restoring', 'restarting', 'restore-complete'].includes(step)) {
    <div class="w-100 d-flex flex-column align-items-center mb-2">
      <h4 class="mb-3 text-center">
        @if (step === 'restoring') { {{ 'setup_wizard_restoring' | translate }} } @else if (step === 'restarting') { {{
        'setup_wizard_starting' | translate }} } @else if (step === 'restore-complete') { {{ 'setup_wizard_complete' |
        translate }} }
      </h4>
      <div id="output" class="font-monospace small alert alert-info w-100 text-start mt-1 mb-0"></div>
      @if (step === 'restore-complete') {
      <a class="btn btn-lg btn-primary mt-4" href="/login">{{ 'form.button_continue' | translate }}</a>
      }
    </div>
    } @else if (step === 'setup-complete') {
    <div class="w-100 d-flex flex-column align-items-center mb-2">
      <h4 class="mb-3">{{ 'setup_wizard_complete_title' | translate }}</h4>
      <div class="mb-4 small grey-text text-center">{{ 'setup_wizard_completed' | translate }}</div>
      <a class="btn btn-lg btn-primary" href="/">{{ 'form.button_continue' | translate }}</a>
    </div>
    }
  </div>
</div>
